<!--
 * @Description:
 * @Author: william
 * @Date: 2024-05-10 11:33:32
 * @LastEditors: william
 * @LastEditTime: 2025-06-04 10:51:30
-->
<template>
  <div class="login-container">
    <el-row class="login-inner">
      <el-col class="main-login-left" :span="12">
        <div class="logo-title">智慧厨房管理平台</div>
      </el-col>
      <el-col class="main-login-right" :span="12">
        <transition-group>
          <el-form
            ref="refLoginForm"
            :model="loginForm"
            :rules="loginRules"
            auto-complete="on"
          >
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                class="login-item"
                type="text"
                :placeholder="$t('public.userName')"
                tabindex="1"
                clearable
                auto-complete="on"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                class="login-item"
                :type="passwordType"
                :placeholder="$t('public.password')"
                tabindex="2"
                clearable
                auto-complete="on"
                @keyup.enter="handleLogin"
              />
              <span class="show-pwd" @click="showPwd">
                <svg-icon
                  :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                  :name="passwordType === 'password' ? 'eye' : 'eye-open'"
                  style="fill: #fff"
                />
              </span>
            </el-form-item>
            <el-form-item prop="captchaCode">
              <el-input
                v-model="loginForm.captchaCode"
                class="login-item"
                :placeholder="$t('public.verCode')"
                tabindex="2"
                maxlength="4"
                @keyup.enter="handleLogin"
              >
                <template v-slot:append>
                  <img
                    v-loading="codeLoading"
                    :src="codeImage"
                    style="cursor: pointer"
                    @click="getCodeImage"
                  />
                </template>
              </el-input>
            </el-form-item>
            <el-button
              class="login-btn"
              type="primary"
              @click.prevent="handleLogin"
            >
              {{ $t('login.title') }}
            </el-button>
          </el-form>
        </transition-group>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
const loginLoading = ref(false)
const refLoginForm = ref(null)
const loginForm = ref({
  username: '',
  password: '',
  captchaCode: '',
  captchaId: ''
})
const refPassword = ref(null)
const passwordType = ref('password')
const codeLoading = ref(false)
const codeImage = ref(null)
const userStore = useUserStore()

const loginRules = {
  username: [
    {
      required: true,
      trigger: ['blur', 'change'],
      message: g_t('public.usernameTips')
    }
  ],
  password: [
    {
      required: true,
      trigger: ['blur', 'change'],
      message: g_t('public.passwordTips')
    }
  ],
  captchaCode: [
    {
      required: true,
      trigger: ['blur', 'change'],
      message: g_t('public.verCodeTips')
    }
  ]
}

const getCodeImage = () => {
  loginForm.value.captchaCode = ''
  loginForm.value.captchaId = ''
  codeLoading.value = true
  g_api.user
    .apiCaptchaImage({
      _v: +new Date().getTime()
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        codeImage.value = 'data:image/png;base64,' + data.img
        loginForm.value.captchaId = data.captchaId
      }
    })
    .finally(() => {
      codeLoading.value = false
    })
}

const showPwd = () => {
  passwordType.value = passwordType.value === 'password' ? '' : 'password'
  nextTick(() => {
    refPassword.value.focus()
  })
}

const handleLogin = () => {
  refLoginForm.value.validate(valid => {
    if (!valid) return
    if (loginLoading.value) return
    loginLoading.value = true
    userStore
      .login(loginForm.value)
      .then(async () => {
        g_router.push({ path: '/' })
      })
      .catch(() => {
        getCodeImage()
      })
      .finally(() => {
        loginLoading.value = false
      })
  })
}

onMounted(() => {
  getCodeImage()
})
</script>

<style lang="scss">
$loginInputText: #aaa;

.login-container {
  width: 100%;
  height: 100%;
  background: url('../../assets/login/login_bg_1.jpg') no-repeat;
  background-position: 50%;
  background-size: cover;
}
.login-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
  height: 500px;
  border-radius: 5px;
  overflow: hidden;
}
.main-login-left {
  padding: 15px;
  background: rgba(46, 171, 255, 1) url('../../assets/login/login_left.png')
    right bottom no-repeat;
  background-size: contain;

  .logo-title {
    font-size: 26px;
    color: #fff;
  }
}

.login-inner .main-login-right {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 30px;
  background: rgba(45, 48, 53, 1);
  .el-form {
    width: 100%;
  }
  .el-form-item {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      width: 100%;
      height: 2px;
      background-color: #46494e;
    }
    .el-form-item__content {
      display: flex;
      align-items: center;
      .el-input {
        flex: 1;
      }
      .show-pwd {
        display: flex;
        align-items: center;
        margin-left: 5px;
        cursor: pointer;
      }
      .el-input-group__append {
        position: absolute;
        left: auto;
        right: 0;
        top: -7px;
        width: 110px;
        height: 40px;
        padding: 0;
        background-color: transparent;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .el-input__wrapper {
    height: 40px;
    padding: 0;
    background: transparent;
    box-shadow: none !important;
    &.is-focus {
      box-shadow: none !important;
    }
    input {
      background: transparent;
      border: none;
      -webkit-appearance: none;
      border-radius: 0;
      padding: 12px 5px 12px 5px;
      color: $loginInputText !important;
      height: 0;
      background-clip: content-box;
      &:-webkit-input-placeholder {
        color: $loginInputText;
      }
      // 自动填充表单项输入框背景色，勿删！！！
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        -webkit-text-fill-color: $loginInputText !important;
        box-shadow: inset 0 0 0 1000px #2d3035;
      }
      &:-internal-autofill-previewed,
      &:-internal-autofill-selected {
        -webkit-text-fill-color: $loginInputText !important;
      }
    }
  }
}
.login-btn {
  background-color: #409eff !important;
  border-color: #409eff !important;
}
</style>
